<template>
  <view>
<!--    <u-navbar-->
<!--      title="设备详情"-->
<!--      :background="{ backgroundColor:'#9CE0FF'}"-->
<!--      :border-bottom="false"-->
<!--      title-color="#000"-->
<!--      title-size="37"-->
<!--      :isCustomBack="true"-->
<!--      @customBack="toWork"-->
<!--    />-->
    <view v-if="isRightEquipment">
      <view class="fz-30 p-tb-35 p-lr-40 font-bold w-full text-center">
        <text>{{ equipmentData.name }}</text>
      </view>
      <view class="sticky top0 z-3 w-full">
        <u-tabs
            :bold="false"
            :current="tabsCurrent"
            :is-scroll="false"
            :list="list"
            active-color="#2D8CF0"
            bar-height="10"
            bar-width="350"
            duration="0"
            @change="change"
        ></u-tabs>
        <u-line
            color="#CCCCCC"
            length="94%"
            margin="-5rpx 0 0 20rpx"
        />
      </view>

      <!--基本信息-->
      <view v-if="tabsCurrent == 0" class="mt-50">
        <sub-title title="设备信息"></sub-title>
        <view class="p-lr-40 mb-20">
          <view class="fz-30 lh-42 color-888888 mt-20 flex justify-between">
            <text class="w-200">设备编号</text>
            <view class="flex1 text-right">
              <text class="">{{ equipmentData.deviceNo }}</text>
            </view>
          </view>
          <view class="fz-30 lh-42 color-888888 mt-10 flex justify-between">
            <text class="w-200">设备投运时间</text>
            <view class="flex1 text-right">
              <text class="">{{ equipmentData.purchaseDate }}</text>
            </view>
          </view>
          <view class="fz-30 lh-42 color-888888 mt-10 flex justify-between">
            <text class="w-200">设备类型</text>
            <view class="flex1 text-right">
              <text class="">{{ equipmentData.categoryName }}</text>
            </view>
          </view>
          <view class="fz-30 lh-42 color-888888 mt-10 flex justify-between">
            <text class="w-200">设备位置</text>
            <view class="flex1 text-right">
              <text class="">{{ equipmentData.roomName }}</text>
            </view>
          </view>
        </view>
        <sub-title title="设备图片"></sub-title>
        <view class="p-lr-40 pt-20">
          <view class="flex flex-wrap"  v-if="photoList.length">
            <view class="w-150 h-150 bg-CCCCCC mr-30 mb-20" v-for="(item,index) in photoList" :key="item.attachId">
              <image class="w-150 h-150" @tap="previewImage(photoList, index)" :src="item"></image>
            </view>
          </view>
          <view v-else class="w-150 h-150 bg-CCCCCC flex flex-column align-center justify-center">
            <image class="w-47 h-40" src="@/static/images/common/empty.png"></image>
            <text class="color-fff fz-24 lh-33 mt-10">无设备图片</text>
          </view>
        </view>
      </view>

      <!--生命周期报告-->
      <view v-else class="mt-55 ml-40">
        <view v-for="(item, idx) in historyData" :key="idx">
          <view class="flex fz-32 align-center">
            <view class="w-24 h-24 border-5-2D8CF0 br-round"></view>
            <text class="ml-10">{{ item.time }}</text>
          </view>
          <view class="ml-12 h-84 border-left-CCCCCC pt-10 pl-20 fz-32 flex" :class="(idx+1) == historyData.length ? 'unshow-line' : ''">
            <text>{{ item.content }}</text>
            <template  v-if="item.status && item.status === '2'">
              <view class="ml-50" @tap="toCheckedHistory">
                <text class="color-2D8CF0">查看巡检记录</text>
                <image class="w-28 h-20 ml-10" src="@/static/images/equipment/eye.png"></image>
              </view>
            </template>
          </view>
        </view>
        <!--      <view class="flex fz-24 lh-24">-->
        <!--        <view class="w-24 h-24 border-5-2D8CF0 br-round"></view>-->
        <!--        <text class="ml-10">08：30：00 2022-10-31</text>-->
        <!--        <text></text>-->
        <!--      </view>-->
        <!--      <view class="ml-12 h-84 pt-10 pl-20 fz-24 flex">-->
        <!--        <text class="w-175 block">设备维修</text>-->
        <!--        <view>-->
        <!--          <text class="color-2D8CF0">查看维修记录</text>-->
        <!--          <image class="w-28 h-20 ml-10" src="@/static/images/equipment/eye.png"></image>-->
        <!--        </view>-->
        <!--      </view>-->
      </view>
    </view>
    <empty-icon v-else content="非本科室或医院设备信息，无法查看"></empty-icon>
  </view>
</template>

<script>
import SubTitle from "@/components/SubTitle/SubTitle";
import { getDevice, getDeviceLifeCycle } from "@/api/equipment/equipment";
import { getAttachList } from "@/api/hospital/device";

import dayjs from '@/libs/dayjs.min.js'
import EmptyIcon from "@/components/EmptyIcon/EmptyIcon";
export default {
  name: "equipment",
  components: {EmptyIcon, SubTitle},
  data() {
    return {
      tabsCurrent: 0,
      list: [
        {
          name: "基本信息",
        },
        {
          name: "生命周期报告",
        }
      ],
      equipmentData:{
        name:'',
        deviceNo: '',
        purchaseDate: '',
        categoryName: '',
        roomName: '',
      }, //基本信息
      deviceId: '', //设备ID
      historyData: [], //生命周期报告
      photoList: [], //设备图片列表
      isRightEquipment: false,//是否有权限
      isAdminManagerEngineer: false, //
    }
  },
  onLoad(option) {
    this.deviceId = decodeURIComponent(option.scene).split('=')[1]
    // this.deviceId = '1590162922200973313'
    this.initData()
    this.isAdminManagerEngineer =  this.$auth.hasRoleOr(['admin','co-admin', 'manager', 'engineer'])
  },
  methods:{
    // 点击预览
    previewImage(urls, index) {
      uni.previewImage({
        urls, //需要预览的图片链接列表
        current: index,
        indicator: "none", //图片指示器样式 "default" - 底部圆点指示器； "number" - 顶部数字指示器； "none" - 不显示指示器
      });
    },
    // toWork(){
    //   if(this.isAdminManagerEngineer){
    //     uni.switchTab({
    //       url: '/pages/tabbar/home/home'
    //     })
    //   }
    //   else{
    //     uni.switchTab({
    //       url: '/pages/tabbar/work/work'
    //     })
    //   }
    // },
    initData() {
      let lifeCycle = []
      new Promise((resolve, reject) => {
        getDevice(this.deviceId).then(res => {
          if(!res.data){
            return
          }
          this.isRightEquipment = true
          const data = res.data
          this.equipmentData.name = data?.name || '-'
          this.equipmentData.deviceNo = data?.deviceNo || '-'
          this.equipmentData.purchaseDate = data?.purchaseDate ? dayjs(data.purchaseDate).format('YYYY-MM-DD HH:mm') : '-'
          this.equipmentData.categoryName = data?.categoryName || '-'
          this.equipmentData.roomName = data?.roomName || '-'
          resolve()
        })
      }).then(() => {
        getAttachList(this.deviceId).then(res => {
          this.photoList = res.data.map(item => {
            return item.link
          })
        })
        getDeviceLifeCycle(this.deviceId).then(res => {
          const data = res.data
          if(data) {
            if(data.historys && data.historys.length > 0) {
              lifeCycle = data.historys.map(item => {
                return {
                  time: dayjs(item.createTime).format('HH:mm:ss YYYY-MM-DD'),
                  content: item.content
                }
              })
            }
            if(data.inspection) {
              lifeCycle.push({
                time: `${dayjs(data.inspection.startDate).format('YYYY-MM-DD')} 至 ${dayjs(data.inspection.endDate).format('YYYY-MM-DD')}`,
                content: '设备日常巡检',
                status: '2' // 2为巡检
              })
            }
          }
          this.historyData = lifeCycle || []
        })
      })
    },
    change(index) {
      this.tabsCurrent = index;
    },
    toCheckedHistory(){
      this.$tab.navigateTo(`/pages/equipment/checked-history?deviceId=${this.deviceId}`)
    }
  }
}
</script>
<style lang="scss">
page{
  background-color: #FFFFFF;
}
</style>
<style lang="scss" scoped>
/deep/.u-tab-bar {
  bottom: -10rpx !important;
  z-index: 9;
}
.unshow-line {
  border-left-color: transparent;
}
</style>
